<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>注册</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <link rel="stylesheet" href="layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="layuiadmin/style/login.css" media="all">
    <script src="layui/jquery-3.0.0.min.js"></script>
    <style type="text/css">
        .layui-form-item {
            margin-bottom: 5px;
        }
    </style>
</head>
<body>
<div class="layadmin-user-login"
     id="LAY-user-login" style="padding: 0;">
    <div class="layadmin-user-login-main">
        <div class="layadmin-user-login-box layadmin-user-login-header">
            <h2>Orange</h2>
            <p>橘子网课查题注册</p>
        </div>
        <div class="layadmin-user-login-box layadmin-user-login-body layui-form" style="padding-top: 0px;">

            <div class="layui-form-item">
                <label class="layadmin-user-login-icon layui-icon layui-icon-username"></label>
                <input type="text" name="account" id="regId" lay-verify="required|regId" placeholder="手机号|邮箱"
                       class="layui-input">
            </div>
            <div class="layui-form-item">
                <label class="layadmin-user-login-icon layui-icon layui-icon-username"></label>
                <input type="text" name="nickname" id="regName" lay-verify="required|regName" placeholder="昵称"
                       class="layui-input">
            </div>
            <div class="layui-form-item">
                <div class="layui-row">
                    <div class="layui-col-xs6">
                        <label class="layadmin-user-login-icon layui-icon layui-icon-password"
                               for="LAY-user-login-password"></label>
                        <input type="password" name="password" id="regPassword" lay-verify="required|pass"
                               placeholder="密码" class="layui-input" readonly onfocus="this.removeAttribute('readonly')">
                    </div>
                    <div class="layui-col-xs6">
                        <div>
                            <label class="layadmin-user-login-icon layui-icon layui-icon-password"
                                   for="LAY-user-login-repass"></label>
                            <input type="password" name="repass" id="repass" lay-verify="required|repass"
                                   placeholder="确认密码" class="layui-input" readonly
                                   onfocus="this.removeAttribute('readonly')">
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-row">
                    <div class="layui-col-xs7">
                        <label class="layadmin-user-login-icon layui-icon layui-icon-vercode"
                               for="LAY-user-login-vercode"></label>
                        <input type="text" name="code" id="login-vercode" lay-verify="required" placeholder="图形验证码"
                               class="layui-input">
                    </div>
                    <div class="layui-col-xs5">
                        <div style="margin-left: 10px;">
                            <img th:src="@{/captcha}"
                                 id="code">
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <input type="checkbox" name="agreement" lay-skin="primary" title="同意用户协议" checked>
            </div>
            <div class="layui-form-item">
                <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="user-reg-submit">注 册</button>
            </div>
            <div class="layui-trans layui-form-item layadmin-user-login-other">
                <!--                <label>社交账号注册</label>-->
                <!--                <a href="javascript:"><i class="layui-icon layui-icon-login-qq"></i></a>-->
                <!--                <a href="javascript:"><i class="layui-icon layui-icon-login-wechat"></i></a>-->
                <!--                <a href="javascript:"><i class="layui-icon layui-icon-login-weibo"></i></a>-->

                <a th:href="@{/login}" class="layadmin-user-jump-change layadmin-link "><label>用户登入</label></a>
            </div>
        </div>
    </div>
</div>

<script src="layui/layui.js"></script>
<script>
</script>
<script>
    layui.config({
        base: 'layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'user', 'form', 'jquery'], function () {
        var $ = layui.jquery
            , layer = layui.layer
            , form = layui.form
            , router = layui.router()
            , search = router.search;

        form.render();

        //自定义验证规则
        form.verify({
            account: function (value) {
            }
            , nickname: ""
            , regMailbox: [/^[a-z0-9._%-]+@([a-z0-9-]+\.)+[a-z]{2,4}$|^1[3|4|5|7|8]\d{9}$/, '邮箱格式不对']
            // ,regPassword: [/^(?=.*[0-9])(?=.*[a-zA-Z])(.{6,12})$/, '密码必须6到12位必须包含数字且区分大小写']
            , repass: function (value) {
                const passwordValue = $('input[name=password]').val();
                if (value !== passwordValue) {
                    return '两次输入的密码不一致!';
                }
            }
        });

        $("#regId").blur(function () {
            const Id = $("#regId").val();
            $.ajax({
                url: "/users/",
                type: "get",
                data: {account: Id},
                dataType: 'json',
                success: function (res) {
                    console.log(res);
                    if (res.status != 200) {
                        layer.msg('用户编号已存在！', {icon: 2, shade: [0.5, '#000000'], shadeClose: true, time: 1000});
                        $("#regId").val("");
                        $("#regId").focus();
                        return false;
                    }
                }
            });
        });

        $("#code").click(function () {
            $(this).attr("src", "/captcha?v=" + Math.round(Math.random() * 10));
        });
        //监听提交
        form.on('submit(user-reg-submit)', function (data) {

            $.ajax({
                url: "/register",
                type: "post",
                data: data.field,
                dataType: "json",
                success: function (data) {
                    if (data.status == -1) {
                        layer.msg('验证码错误', {icon: 5, shade: [0.5, '#000000'], shadeClose: true, time: 2000});
                        return false;
                    }
                    if (data.msg == '2') {
                        layer.msg('未选择同意用户协议', {icon: 5, shade: [0.5, '#000000'], shadeClose: true, time: 2000});
                        return false;
                    }
                    if (data.status == 200) {
                        layer.msg("注册成功,即将跳转登陆", {
                            icon: 1,
                            shade: [0.5, '#000000'],
                            shadeClose: true,
                            time: 2000
                        }, function () {
                            location.href = "/sign";
                        });
                    } else {
                        layer.msg('注册失败', {icon: 5, shade: [0.5, '#000000'], shadeClose: true, time: 2000});
                    }
                }
            });
            return false;
        });
    });
</script>
</body>
</html>